<template>
  <div class="keyboard">
    <form action="/">
      <van-search v-model="value"
                  show-action
                  placeholder="请输入搜索关键词"
                  @search="onSearch"
                  @cancel="onCancel" />
    </form>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import { ToastOptions, ToastMessage } from 'node_modules/vant/types/toast'
export default {
  setup() {
    const router = useRouter()
    const value = ref('')

    const onSearch = (val: ToastOptions|ToastMessage) => {
        Toast(val)
        /**
         * 回车 emit 向父组件传值
         */
    }

    const onCancel = () => {
      Toast('取消')
      router.back()
    }
    return {
      value,
      onSearch,
      onCancel,
    }
  },
}
</script>

<style lang="less" scoped>
.keyboard {
  position: relative;
  width: 100%;
  height: 100vh;
}
</style>